<template>
  <div class="addClient">
    <div class="content">
      <div class="flex" style="padding-bottom:20px">
        <span class="left">手机号</span>
        <!-- <van-search
          type="number"
          maxlength="11"
          class="flex-1"
          style="text-align:right"
          @use-action-slot="false"
          @search="res.phone = e.mp.detail;"
          placeholder="请填写"
        />-->
        <input
          class="flex-1 right"
          maxlength="11"
          style="text-align:right"
          v-model="res.phone"
          placeholder="请填写"
          type="number"
        />
      </div>
      <div class="flex" style="padding-bottom:20px">
        <span class="left">邮箱</span>
        <input
          class="flex-1 right"
          style="text-align:right"
          v-model="res.mailbox"
          placeholder="请填写"
          type="text"
        />
      </div>

      <div class="flex" style="padding-bottom:20px">
        <span class="left">姓名</span>
        <input
          class="flex-1 right"
          style="text-align:right"
          v-model="res.customerName"
          placeholder="请填写"
          type="text"
        />
      </div>
      <div class="flex" style="padding-bottom:20px" @click="choiceType">
        <span class="flex-1 left">证件类型</span>
        <div class="right flex align-center">
          <input
            type="text"
            style="text-align:right"
            placeholder="请选择"
            v-model="documentType"
            disabled
          />
          <img
            src="/static/images/manage/right.png"
            style="width:10px;height:14px;margin-left:8px"
            alt
          />
        </div>
      </div>
      <div class="flex" style="padding-bottom:20px;">
        <span class="left">证件号</span>
        <div class="flex-1 flex align-center">
          <input
            class="flex-1 right"
            maxlength="19"
            style="text-align:right;"
            :style="{paddingRight:res.certificateNumber?'30px':'0'}"
            v-model="res.certificateNumber"
            placeholder="请填写"
            placeholder-style="text-align:right "
            type="text"
          />
          <img
            @click.stop="delect"
            v-if="show"
            src="/static/images/manage/delect.png"
            alt
            style="width:18px;height:18px"
          />
        </div>
        <!-- <input
          class="flex-1 right"
          maxlength="19"
          v-model="res.certificateNumber"
          style="text-align:right"
          placeholder="请填写"
          type="text"
        />-->
      </div>
    </div>
    <div class="flex address">
      <span class="left">联系地址</span>
      <textarea
        class="flex-1"
        style="text-align:right"
        placeholder-style="text-align:right;font-size:14px "
        v-model="res.customMode"
        placeholder="请填写"
        type="text"
      />
    </div>
    <div style="padding:0 15px">
      <div class="card">
        <div v-if="type">
          <div class="flex">
            <div class="flex-1">
              <p>身份证正面</p>
              <img
                v-if="res.certFrontImg"
                @click="imageItem(1)"
                :src="res.certFrontImg"
                class="cardImg"
                alt
              />
              <img
                v-else
                @click="imageItem(1)"
                src="/static/images/user/uploadCard.png"
                class="cardImg"
                alt
              />
            </div>
            <div class="flex-1">
              <p>身份证背面</p>
              <img
                v-if="res.certBackImg"
                @click="imageItem(2)"
                :src="res.certBackImg"
                class="cardImg"
                alt
              />
              <img
                v-else
                @click="imageItem(2)"
                src="/static/images/user/uploadCard.png"
                class="cardImg"
                alt
              />
            </div>
          </div>
        </div>
        <div v-else>
          <p>护照信息页</p>
          <img
            v-if="res.certFrontImg"
            @click="imageItem(1)"
            :src="res.certFrontImg"
            class="cardImg"
            alt
          />
          <img
            v-else
            @click="imageItem(1)"
            src="/static/images/user/uploadCard.png"
            class="cardImg"
            alt
          />
        </div>
      </div>
    </div>
    <!-- /**提交 */ -->
    <div class="jump">
      <div class="btn" @click="jump">提交</div>
    </div>
  </div>
</template>

<script>
// import { realAdd } from '@/api/api';
import { apiGetOssPlicy, realAdd } from "@/api/api";
import uploadImage from "@/utils/upload";
export default {
  props: {},
  data() {
    return {
      show: false,
      type: true,
      // activeIndex: 0,
      documentType: "身份证",
      res: {
        customerName: null,
        documentType: "身份证",
        certificateNumber: null,
        phone: null,
        certFrontImg: null,
        certBackImg: null
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    Object.assign(this.$data, this.$options.data());
    this.apiGetOssPlicy();
    let utils = require("@/utils/idCard.js");
    this.validateIdCard = utils.default.validateIdCard;
    this.checkPassport = utils.default.checkPassport;
  },
  watch() {},
  updated() {
    if (this.res.certificateNumber) {
      this.show = true;
    }
  },
  methods: {
    /** 清除数据 */
    delect() {
      this.res.certificateNumber = null;
      this.show = false;
    },
    // 选择证件类型
    choiceType() {
      const that = this;
      wx.showActionSheet({
        itemList: ["身份证", "护照"],
        success(res) {
          // that.activeIndex = res.tapIndex;
          // console.log('res.tapIndex', that.activeIndex);
          if (res.tapIndex === 0) {
            that.type = true;
            that.documentType = "身份证";
          } else {
            that.type = false;
            that.documentType = "护照";
          }
        },
        fail(res) {
          console.log(res.errMsg);
        }
      });
    },
    // 提交实名认证信息请求接口
    async verified() {
      this.res.documentType = !this.type ? "PASSPORT" : "IDENTITY_CARD";
      await realAdd(this.res).then(res => {
        if (res === "") {
          wx.showToast({
            title: "提交成功",
            icon: "none",
            duration: 1000
          });
          setTimeout(() => {
            wx.navigateTo({
              url: "/pages/PersonalCenter/userChildren/client/myClient/main"
            });
          }, 1000);
          // wx.navigateTo({
          //   url: '/pages/PersonalCenter/userChildren/evaluation/evaluation/main'
          // });
        }
      });
    },
    // 跳到风险测评页面
    isPhone(str) {
      const reg = /^[1][2, 3,4,5, 6 ,7,8, 9][0-9]{9}$/;
      return reg.test(str);
    },
    jump() {
      console.log(this.res);
      if (!this.res.phone) {
        wx.showToast({
          title: "请填写手机号！",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      if (!this.isPhone(this.res.phone)) {
        wx.showToast({
          title: "手机号格式不正确",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      if (!this.res.customerName) {
        wx.showToast({
          title: "请选择姓名！",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      if (!this.res.certificateNumber) {
        wx.showToast({
          title: "请填写证件号！",
          icon: "none",
          duration: 2000
        });
        return false;
      }
      // console.log(this.activeIndex);
      if (this.type) {
        if (!this.res.certFrontImg) {
          wx.showToast({
            title: "请上传身份证正面照！",
            icon: "none",
            duration: 2000
          });
          return false;
        }
        if (!this.res.certBackImg) {
          wx.showToast({
            title: "请上传身份证反面照！",
            icon: "none",
            duration: 2000
          });
          return false;
        }
        this.validateIdCard(this.res.certificateNumber);
      } else {
        if (!this.res.certFrontImg) {
          wx.showToast({
            title: "请上传护照！",
            icon: "none",
            duration: 2000
          });
          return false;
        }
        this.checkPassport(this.res.certificateNumber);
      }
    },
    /** 获取oss凭证 */
    async apiGetOssPlicy() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      const data = await apiGetOssPlicy();
      wx.hideLoading();
      if (data) {
        this.sign = data;
      }
    },
    /** 上传图片 */
    imageItem(index) {
      let that = this;
      if (this.sign != null) {
        wx.chooseImage({
          // count: 3 - that.clueLinkmanCard.length, // 最多选择几张图片
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            // 支持多图上传
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              // 验证格式
              if (!/.(jpg|jpeg|png|gif)$/i.test(res.tempFilePaths[i])) {
                wx.showToast({
                  title: "图片格式必须是jpeg,jpg,png,gif中的一种",
                  icon: "none"
                });
                return;
              }
              // 显示消息提示框
              wx.showLoading({
                title: "图片上传中...",
                mask: true
              });
              console.log("that.sign", that.sign);
              that.sign &&
                uploadImage(
                  res.tempFilePaths[i],
                  that.sign,
                  function(result) {
                    console.log(result, "rrrrrrrrrr");
                    if (index === 1) {
                      that.res.certFrontImg = result;
                    } else {
                      that.res.certBackImg = result;
                    }
                    // 做你具体的业务逻辑操作
                    // that.imgList.push(result);
                    console.log("imgList", that.imgList);
                    wx.hideLoading();
                  },
                  function(result) {
                    // 做你具体的业务逻辑操作
                    console.log("uploadfileerro", JSON.stringify(result));
                    wx.showToast({
                      title: "result" + JSON.stringify(result),
                      icon: "none",
                      duration: 6000
                    });
                    // wx.hideLoading();
                  }
                );
            }
          }
        });
      } else {
        this.apiGetOssPlicy();
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.addClient {
  .address {
    padding: 0 12px 20px 16px;
    border-bottom: 0.5px solid #e6e6e6;
    font-size: 14px;
  }
  .customMode {
    text-align: right;
    width: 100%;
    height: 50px;
    padding-left: 52px;
    color: #6b6b6b;
    font-size: 14px;
  }
  .jump {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    .btn {
      height: 42px;

      // width: 100%;
      margin: 6px 15px;
      background: rgba(24, 119, 152, 1);
      border-radius: 2px;
      color: #fff;
      font-size: 15px;
      line-height: 42px;
      text-align: center;
    }
  }
  .card {
    padding: 26px 0 25px 0;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
    color: #020604;
    .cardImg {
      width: 166px;
      height: 100px;
      margin-top: 15px;
    }
  }
  .content {
    padding: 20px 15px 5px 15px;

    .left {
      font-size: 14px;
      color: #020604;
    }
    .right {
      font-size: 14px;
      color: #6b6b6b;
    }
  }
}
</style>
